<template>
  <div :class="{'mobile-overview-container': showMobilePage}" class="overview-container">
    <template v-if="!permissionDenied">
      <div class="header flex-center">
        <el-checkbox v-if="hasRouteAuth('system:chart:read')" v-model="isFirstPage" class="checkbox" @change="checkboxChange">仅展示首页</el-checkbox>
        <div class="flex-1"/>
        <createBtn v-if="hasRouteAuth('system:chart:add')" text="添加分类" @click.native="addItem"/>
      </div>
      <el-row v-if="allChartTab.length" :gutter="16">
        <template v-for="(item) in allChartTab">
          <el-col v-if="isFirstPage ? item.isFirstPage : true" :span="5" :key="item.id">
            <div class="overview-item" @click="$emit('tabClick', item)">
              <div class="overview-name"><Ellipsis :content="item.name" /></div>
              <div class="flex-center">
                <div class="overview-num">
                  <img :src="chartOverviewIcon" alt="">
                  <span>{{ item.chatNums || 0 }}项图表</span>
                </div>
                <div :style="{background: item.isEnable ? '#31CC9C' : 'rgb(255, 78, 95)'}" class="tag">
                  {{ item.isEnable ? '启用' : '禁用' }}
                </div>
                <div class="tag index">
                  位置{{ item.index || item.index === 0 ? item.index : '--' }}
                </div>
              </div>
              <div class="overview-icon-container">
                <div class="overview-img">
                  <div v-if="item.attachment && item.attachment.length" class="overview-icon scale-img">
                    <el-image :src="item.attachment[0].url" fit="scale-down" class="image" alt=""/>
                  </div>
                  <div v-else class="overview-icon">
                    <img :src="chartOverviewTableIcon" alt="">
                    <img :src="chartOverviewChatIcon" alt="">
                    <img :src="chartOverviewChat1Icon" alt="">
                  </div>
                  <div class="createUser">
                    <span class="field-name">创建人：<wbr></span>{{ item.creator || '--' }}
                  </div>
                </div>

                <div class="overview-info">
                  <div class="flex-center mt8">
                    <span class="field-name">可见人员：</span>
                    <div v-if="item.isAll">全部</div>
                    <CheckUserInfo
                      v-else-if="item.userList && item.userList.length"
                      :user-list="item.userList"
                      :multiple="item.userList && item.userList.length > 1"
                      :user-id="item.userList && item.userList.length === 1?item.userList[0].id:null"
                      :label="item.userList && item.userList.length === 1?item.userList[0].name:null"
                      key-name="id"
                      label-name="name"
                    />
                    <div v-else>--</div>
                  </div>
                  <div class="flex-center mt8">
                    <span class="field-name">可见部门：</span>
                    <div style="flex:1;width: 0;">
                      <div v-if="item.isAll">全部</div>
                      <ToolTip v-else-if="item.departmentList && item.departmentList.length" :content="getDeptNames(item.departmentList)" style="max-width: 100%"/>
                      <div v-else>--</div>
                    </div>
                  </div>

                </div>
              </div>
              <el-dropdown :append-to-body="false" class="more-menu">
                <div class="el-dropdown-link" @click.stop="() => {}">
                  <div class="dot-btn">
                    <div class="dot" />
                    <div class="dot" />
                    <div class="dot" />
                  </div>
                </div>
                <el-dropdown-menu slot="dropdown" class="category-dropdown">
                  <el-dropdown-item @click.native="toDetail(item)">分类详情</el-dropdown-item>
                  <el-dropdown-item v-if="canOperator(item, 'system:chart:edit')" @click.native="editItem(item) ">编辑</el-dropdown-item>
                  <el-dropdown-item v-if="hasRouteAuth('system:chart:copy')" @click.native="copyItem(item)">复制</el-dropdown-item>
                  <el-dropdown-item v-if="canOperator(item, 'system:chart:delete')" @click.native="deleteItem(item.id)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <div v-if="item.isFirstPage" class="first-page">
                首
              </div>
            </div>
          </el-col>
        </template>
      </el-row>
      <EmptyPlaceholder v-else mode="border" style="padding:12px 0 18px 0"/>
      <categoryDialog ref="categoryDialog" @handleOk="handleOk"/>
    </template>
    <DeniedPlaceholder v-else />
  </div>
</template>
<script>
import chartOverviewIcon from '@/assets/chartsTheme/chart_overview.png';
import chartOverviewTableIcon from '@/assets/chartsTheme/chart_overview_table.png';
import chartOverviewChatIcon from '@/assets/chartsTheme/chart_overview_chat.png';
import chartOverviewChat1Icon from '@/assets/chartsTheme/chart_overview_chat1.png';
import categoryDialog from './categoryDialog';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import createBtn from '@/components/Common/baseComponent/createBtn';
import { mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';
import { createChartsTab, editChartsTab, deleteChartsTab } from '@/api/config';
const DIALOG_TYPE = {
  ADD: 0,
  EDIT: 1,
  COPY: 2,
  DETAIL: 3
};
export default {
  components: {
    categoryDialog,
    createBtn,
    EmptyPlaceholder
  },
  props: {
    allChartTab: {
      type: Array,
      default: () => []
    },
    permissionDenied: {
      type: Boolean,
      default: false
    }
  },
  data: () => {
    return {
      chartOverviewIcon, chartOverviewTableIcon, chartOverviewChatIcon, chartOverviewChat1Icon,
      isFirstPage: false
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    hasRouteAuth,
    canOperator(item, auth) {
      const admin = hasRouteAuth('system:chart:admin');
      const operatorAuth = hasRouteAuth(auth);
      const isCreator = item.creatorId === this.userInfo.id;
      return (isCreator || admin) && operatorAuth;
    },
    editItem(item) {
      if (this.$refs.categoryDialog) {
        const queryData = JSON.parse(JSON.stringify(item));
        if (queryData.userList && queryData.userList.length) {
          queryData.userList.forEach(i => {
            i.userName = i.name;
          });
        }
        if (item.departmentList && item.departmentList.length) {
          queryData.departmentList = item.departmentList.map(i => i.id);
        }
        this.$refs.categoryDialog.openDialog(queryData, DIALOG_TYPE.EDIT);
      }
    },
    copyItem(item) {
      const queryData = JSON.parse(JSON.stringify(item));
      queryData.srcId = queryData.id;
      queryData.name = `${queryData.name}副本`;
      delete queryData.id;
      if (queryData.userList && queryData.userList.length) {
        queryData.userList.forEach(i => {
          i.userName = i.name;
        });
      }
      if (item.departmentList && item.departmentList.length) {
        queryData.departmentList = item.departmentList.map(i => i.id);
      }
      if (this.$refs.categoryDialog) {
        this.$refs.categoryDialog.openDialog(queryData, DIALOG_TYPE.COPY);
      }
    },
    addItem() {
      if (this.$refs.categoryDialog) {
        this.$refs.categoryDialog.openDialog(null, DIALOG_TYPE.ADD);
      }
    },
    handleOk(data) {
      const { type, queryData } = data;
      const paramsObj = JSON.parse(JSON.stringify(queryData));
      if ([0, 2].includes(type)) {
        this.add(paramsObj);
      } else {
        this.edit(paramsObj);
      }
    },
    edit(params) {
      this.btnLoading = true;
      editChartsTab(params).then(res => {
        this.btnLoading = false;
        if (res.code === 200) {
          this.$refs.categoryDialog.handleClose();
          this.$emit('getTabList');
          this.$message.success('保存成功');
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.btnLoading = false;
      });
    },
    add(params) {
      this.btnLoading = true;
      createChartsTab(params).then(res => {
        this.btnLoading = false;
        if (res.code === 200) {
          this.$refs.categoryDialog.handleClose();
          this.isFirstPage = false;
          this.$emit('getTabList');
          this.$message.success('请求成功');
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.btnLoading = false;
      });
    },
    toDetail(item) {
      const data = JSON.parse(JSON.stringify(item));
      if (data.departmentList && data.departmentList.length) {
        data.departmentNames = data.departmentList.map(i => i.name).join(',');
      } else {
        data.departmentNames = '';
      }
      this.$refs.categoryDialog.openDialog(data, DIALOG_TYPE.DETAIL);
    },
    deleteItem(id) {
      this.$confirm('是否确定删除该图表分类？', '', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        deleteChartsTab({ id }).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.$emit('getTabList');
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    checkboxChange(val) {
      this.$emit('getTabList');
      this.isFirstPage = val;
    },
    getDeptNames(list = []) {
      return list.map(i => i.name).join(',');
    }
  }
};
</script>
<style scoped lang="scss">
.overview-container {
  background: #fff;
  margin: 16px;
  padding: 16px;
  .header {
    margin-bottom: 12px;
    .checkbox {
      z-index: 0;
      ::v-deep {
        .el-checkbox__label {
          color: #333;
        }
      }
    }
    .flex-1 {
      flex: 1;
    }
  }
  &::v-deep {
    .el-col-5 {
      width: 25% ;
    }
  }
  .overview-item {
    position: relative;
    height: 175px;
    background-color: #fff;
    margin-bottom: 16px;
    padding: 16px 0;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid transparent;
    box-shadow: 2px 2px 16px 0px #e1e5ed;
    .tag {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: #fff;
      padding: 2px 10px;
      border-radius: 10px;
      margin-right: 4px;
    }
    .tag:last-child {
      margin-right: 16px;
    }
    .index {
      color: #406EFF;
      background: #EFF4FF;
    }
    .scale-img {
      justify-content: center;
    }
  }
  .overview-item:hover {
    border: 1px solid #406eff;
    .more-menu {
      display: flex;
    }
    .overview-icon,.overview-img {
      display: none;
    }
    .overview-info {
      display: block;
    }
  }
  .overview-name {
    font-size: 23px;
    color: #192452;
    font-weight: bold;
    padding: 0 16px;
  }
  .overview-num {
    display: flex;
    flex: 1;
    align-items: center;
    color: #666666;
    font-size: 14px;
    padding: 0 7px;
    img {
      width: 38px;
    }
  }
  .overview-icon-container {
    padding: 0 16px;
    margin-top: 5px;
  }
  .overview-icon {
    display: flex;
    flex: 1;
    height: 64px;
    padding-top: 14px;
    img {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      margin-left: 13px;
      &:first-child {
        margin-left: 0;
      }
    }
    .image {
      height: 48px;
      border-radius: 8px;
    }
  }
  .field-name {
    white-space: nowrap;
    color: #999999;
  }
  .overview-info {
    display: none;
    width: 100%;
    height: 64px;
    padding-top: 14px;
    border-top: 1px solid #ebeefd;
    color: #333;
    font-size: 12px;
    .mt8 {
      margin-top: 8px;
    }
  }
  .img {
    padding: 4px;
    width: 32px;
    height: 32px;
  }
  .more-menu {
    position: absolute;
    display: none;
    top: 12px;
    right: 12px;
    background: #fff;
    .dot-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 20px;
      border: 1px solid #ddd;
      border-radius: 4px;
      .dot {
        width: 4px;
        height: 4px;
        background: #aeb6c7;
        border-radius: 50%;
        margin-right: 3px;
      }
      .dot:last-child {
        margin: 0;
      }
    }
  }
}
.first-page {
  position: absolute;
  top: -1px;
  left: -1px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 17px;
  background: #406eff;
  border-radius: 8px 0px 8px 0px;
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
}
.mobile-overview-container {
  &::v-deep {
    .el-col-5 {
      width: 100%;
    }
  }
}
.overview-img {
  display: flex;
  align-items: center;
  border-top: 1px solid #ebeefd;
  gap: 5px;
  .createUser {
    padding-top: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    > span {
      flex-shrink: 0;
    }
  }
}
</style>
<style lang="scss">
.category-dropdown {
  padding: 8px 2px !important;
  .el-dropdown-menu__item {
      text-align: center;
      color: #222 !important;    // 下拉菜单文字颜色
  }
  .el-dropdown-menu__item:not(.is-disabled):hover { //鼠标悬停样式
      color: #406EFF !important;
      font-weight: 500 !important;
  }
}
</style>
